<!DOCTYPE html>
<html lang="en">

<head>
    <title>办公隔断- 玻璃隔断-双玻百叶隔断-铝合金隔断现代化高间隔墙_南昌川穹家具有限公司</title>
    <!--幻灯图片 end-->
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        li {
            list-style-type: none
        }
        
        a {
            color: #333;
            text-decoration: none
        }
        
        nav {
            max-width: 1920px;
            min-width: 1080px;
            margin: 0 auto;
            background: #cd1612;
            height: 52px
        }
        
        nav:after {
            content: "";
            display: block;
            clear: both;
            height: 0
        }
        
        #navs {
            width: 1080px;
            margin: 0 auto
        }
        
        #navs>li {
            position: relative;
            float: left
        }
        
        #navs>li>a {
            color: #fff;
            font-family: SimSun, "宋体";
            font-size: 14px;
            display: block;
            height: 52px;
            line-height: 52px;
            padding-left: 40px;
            padding-right: 40px
        }
        
        #navs>li>a:hover {
            background: #e72e2a
        }
        
        #navs>li>a.onfocus {
            background: #e72e2a
        }
        
        #navs>li>ul {
            width: 136px;
            display: none;
            background: #cd1612;
            position: absolute;
            z-index: 10;
            top: 52px
        }
        
        #navs>li>ul>a {
            display: block;
            text-align: center;
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            font-family: SimSun, "宋体";
            color: #fff
        }
        
        #navs>li>ul>a:hover {
            background: #e72e2a
        }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
</head>

<body>


    <nav>
        <div id="navs">
            <li><a href="#" id="hello">网站首页</a>

            </li>
            <li><a href="#" id="aboutus">公司简介</a>
                <ul>
                    <a href="aboutus.html">公司简介</a>
                    <a href="aboutus.html">企业文化</a>
                    <a href="aboutus.html">组织架构</a>
                    <a href="aboutus.html">领导致辞</a>
                    <a href="aboutus.html">发展历程</a>
                    <a href="aboutus.html">荣誉资质</a>
                    <a href="aboutus.html">销售网络</a>
                </ul>
            </li>
            <li><a href="#" id="cases">工程案例</a>
                <ul>
                    <a href="cases.html">双玻系列</a>
                    <a href="cases.html">活动墙系列</a>
                    <a href="cases.html">门系列</a>
                    <a href="cases.html">配件</a>
                </ul>
            </li>
            <li><a href="#" id="product">产品展示</a>
                <ul>
                    <a href="product.html">高隔断</a>
                    <a href="product.html">家具</a>
                </ul>
            </li>
            <li><a href="#" id="news">资讯中心</a>
                <ul>
                    <a href="news.html">行业资讯</a>
                    <a href="news.html">公司新闻</a>
                </ul>
            </li>
            <li><a href="#" id="message">在线留言</a>

            </li>
            <li><a href="#" id="contact">联系我们</a>

            </li>
        </div>
        <!-- <script>
            var lis = document.getElementById("navs").children;
            for (let i = 0; i < lis.length; i++) {
                if (lis[i].children.length > 1) {
                    lis[i].onmouseenter = function() {
                        this.children[1].style.display = "block";
                    }
                    lis[i].onmouseleave = function() {
                        this.children[1].style.display = "none";
                    }
                }
            }
        </script> -->
    </nav>
    <script>
        $(function() {
            //1.鼠标移入，鼠标移出

            // $("#navs>li").on("mouseenter", function() {
            //     // children()  子类   
            //     $(this).children("ul").show();
            // })
            // $("#navs>li").on("mouseleave", function() {
            //     // find()  子类  find("ul")按指定标签查找
            //     $(this).find("ul").hide();
            // })

            // 2.将上述两种合并   hover(鼠标移入执行函数，鼠标移出执行函数)

            // $("#navs>li").hover(function() {
            //         // children()  子类   
            //         // $(this).children("ul").show();
            //         // fadeIn()渐入   可选参数：数字（设置时间  单位毫秒），fast，slow,normal(单词要用引号引起)
            //         // $(this).children("ul").fadeIn(5000);
            //         // slideDown()  滑落
            //         $(this).children("ul").slideDown(2000);
            //     },
            //     function() {
            //         // find()  子类  find("ul")按指定标签查找
            //         // $(this).find("ul").hide();
            //         // fadeOut()渐出
            //         // $(this).find("ul").fadeOut();
            //         // slideUp()  渐渐收起
            //         $(this).find("ul").slideUp();

            //     })

            // 3.事件切换hover,只写一个函数，鼠标经过和鼠标离开都会触发这个函数

            $("#navs>li").hover(function() {
                // 动画或效果触发就执行，多次触发就会造成多个动画或效果排队执行
                // stop()停止动画，必须写在动画前以停止上一次动画，仅执行当前动画 slideToggle()做动画   ，
                //slideToggle()  渐渐收起,渐渐出切换效果
                // $(this).children("ul").slideToggle(5000);
                // $(this).children("ul").stop().slideToggle();
                // 淡入淡出切换
                $(this).children("ul").fadeToggle()
                    // fadeTo()修改透明度  速度和透明度要必须写
                    // $(this).children("ul").fadeTo(1000, .5);
            })
        })
    </script>


</body>

</html>